const ns = 'http://www.w3.org/2000/svg' ;
let viewRatio
function createViewBox(x=0,y=0,width=100,height=100,left=true,bottom=true ){
    

    width = height ;

    //文字大小比例
    viewRatio = height/100 ;
    const svg = document.querySelector('#svg');
    let g = document.querySelector('#g');
    if(g){
        svg.removeChild(g);   
    }


    svg.setAttribute('viewBox',`${x} ${y} ${width} ${height}`) ;
    const h = width/10 ;
    const v = height/10 ;
    g = document.createElementNS(ns,'g');
    g.setAttribute("id","g");
    const children = svg.children;
    if(children.length > 0){
        svg.insertBefore(g,children[0]);
    }else{
        svg.appendChild(g);
    }

    const ds = [] ;
    //画线
    for(let i = 0; i <= 10 ;i++){
        ds.push(`M${i*h} 0V${height}M0 ${i*v}H${width}`);
    }
    const d = ds.join(' ') ;
    const path = document.createElementNS(ns,'path') ;
    path.setAttribute('fill','none');
    path.setAttribute('stroke','#ccc') ;
    path.setAttribute('stroke-width',.5*viewRatio);
    path.setAttribute('d',d);
    
    const text = document.createElementNS(ns,'text');
    text.innerHTML = `${width} * ${height}`;
    text.setAttribute('font-size',3*viewRatio);
    text.setAttribute('x',width*0.8);
    text.setAttribute('y',height*.05)
    text.setAttribute('fill','#888');

    g.appendChild(path);
    g.appendChild(text);


    //增加纵坐标数值
    for(let i=0;i<=10;i++){
        const text = document.createElementNS(ns,'text');
        text.setAttribute('font-size',3*viewRatio);
        text.setAttribute('x',0) ;
        text.setAttribute('y',height-(10-i)*viewRatio*10);
        text.innerHTML = parseInt(height - (i)*viewRatio*10) ;
        g.appendChild(text);
    }


}

function fn2(e){
    e = e||event ;
    if(e.keyCode == 13){
        v = e.target.value
        createViewBox(0,0,v,v);
    }
}

//createViewBox(0,0,300 ,300);